﻿<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>中国省市区地址三级联动jQuery插件</title>
  <!-- <link href="http://www.jq22.com/jquery/bootstrap-3.3.4.css" rel="stylesheet"> -->

</head>

<body>
  <div class="jq22-container">

    <h5>Demo:</h5>
    <form class="form-inline">
      <div data-toggle="distpicker">
        <!-- <div class="form-group"> -->
          <label class="sr-only" for="province2">Province</label>
          <select class="form-control" id="province2" data-province="---- 选择省 ----"></select>
        <!-- </div> -->
        <div class="form-group">
          <label class="sr-only" for="city2">City</label>
          <select class="form-control" id="city2" data-city="---- 选择市 ----"></select>
        </div>
        <div class="form-group">
          <label class="sr-only" for="district2">District</label>
          <select class="form-control" id="district2" data-district="---- 选择区 ----"></select>
        </div>
      </div>
    </form>


  </div>

  <script src="js/jquery-1.8.3.min.js"></script>
  <script src="js/distpicker.data.js"></script>
  <script src="js/distpicker.js"></script>
  <script>
    $(function () {
      console.log($("#province2").find("option:selected").text());
    })
  </script>
</body>

</html>